import React, { useCallback } from 'react'
import { Text, View } from '@tarojs/components'
import Navigate from '@NAVIGATION/navigateManager'
import UserAvatar from '@COMPONENTS/User/UserAvatar'
import UserName from '@COMPONENTS/User/UserName'
import UserDesc from '@COMPONENTS/User/UserDesc'
import { DoctorITF } from '@INTERFACES/Doctor'
import { LanguageType } from '@INTERFACES/Common'
import i18n from '@I18N'
import style from './DoctorAvatarLeftCard.module.scss'

interface Props {
  doctor: DoctorITF;
  language: LanguageType;
  onClick?: () => void
}

const DoctorAvatarLeftCard: React.FC<Props> = ({ doctor, language, onClick }) => {
  const { p8Id, Expertise } = doctor || {}
  const onClickCard = useCallback(
    () => {
      onClick ? onClick() : Navigate.doctorDetail({ pId: p8Id })
    },
    [onClick, p8Id]
  )

  return (
    <View className={style.doctorContainerView} onClick={onClickCard}>
      <View className={style.itemContainer}>
        <UserAvatar data={doctor} />
        <View className={style.itemRight}>
          <UserName data={doctor} language={language} userNameClass={style.userName} />
          <View className={style.userDescContainer}>
            <UserDesc data={doctor} language={language} oneLine userGroupClass={style.userDesc} />
          </View>
        </View>
      </View>
      <Text className={style.expertise}>{`${i18n.doctor.expertise()}：${Expertise?.[language]}`}</Text>
    </View>
  )
}
export default DoctorAvatarLeftCard
